<template>
	<view class="">
		<view class="row pl-30 pr-30 ">
			<view class="row pl-10">
				<view class="status-item mr-5 pointer" :class="index == key ?'selected-sign':'unselected'" 
					v-for="(val,key) in statusItem" :key="key" @click="selsectStatus(key)">
					<view class="t-center">
						<text class="iconfont  mr-5" :class="val.icon" ></text>
						<text >{{val.name}}</text>
						<text v-if="val.num && val.num != 0" class="statusNum">{{val.num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'gt-table-status',
		data(){
			return{
				index:0
			}
		},
		props:{
			statusItem:{
				type:Array,
				default:function(){
					return []
				}
			},
			sign:{
				type:[Number,String],
				default:function(){
					return ''
				}
			}
		},
		created() {
			if(this.sign && this.sign !== ''){
				this.index = this.sign
			}
		},
		methods:{
			selsectStatus(e){
				this.index = e
				this.$emit('callBack',this.statusItem[e])
			},
		}
	}
</script>

<style>
	.status-item{
		height:45px;
		line-height: 45px;
		width: 120px;
		color: #727579 ;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		position: relative;
	}
	.selected-sign{
		color: #409EFF;
		border-bottom: 0px;
		box-sizing: border-box;
		box-shadow: 0px 0px 3px #BBBBBB;
	}
	.unselected{
		background-color: #F9F9F9;
	}
	.unselected:hover{
		background-color: #EEEEEE;
	}
	.statusNum{
		height: 17px;
		line-height: 17px;
		padding:0px 5px;
		text-align: center;
		font-size: 12px;
		color: #FFFFFF;
		background-color: #fa5252;
		border-radius: 50px;
		position: absolute;
		top:-6.5px;
		right:0px;
		z-index:1;
	}
</style>